<style lang="scss" scoped>
	.content {

		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		overflow: hidden;
	}

	.nav {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
	}

	.top {
		padding: 20rpx 0;
	}

	.search {
		width: 690rpx;
		height: 68rpx;
		background: #f4f5f7;
		border: 2rpx solid #f5f5f5;
		border-radius: 46rpx;
		margin: 0rpx auto;
		padding: 20rpx;

		.ipt {
			flex: 1;
		}
	}

	.footer {
		width: 100%;
		background-color: white;
		position: fixed;
		bottom: 0;
		left: 0;
		border-top: 1px solid #cccccc;
		padding-left: 30rpx;
		padding-right: 30rpx;
		z-index: 100;
	}

	.box {
		width: 690rpx;
		padding: 30rpx 20rpx;
		background: #ffffff;
		border-radius: 20rpx;
		box-shadow: 0rpx 32rpx 20rpx -20rpx #e6ebf2;
		margin-top: 30rpx;

		.line {
			width: 100%;
			height: 100rpx;
			border-top: 1px solid #eeeeee;

			.ipt {
				width: 500rpx;
				text-align: right;
			}
		}

		.line2 {
			width: 100%;
			border-top: 1px solid #eeeeee;
			align-items: flex-start;

			.des {
				width: 500rpx;
				text-align: justify;
			}
		}

		.sbtn {
			width: 184rpx;
			height: 64rpx;
			background: #fffefe;
			border: 2rpx solid #409eff;
			border-radius: 34rpx;
		}

		.imgboxs {
			width: 100%;
			flex-wrap: wrap;

			.imgbox {
				width: 148rpx;
				height: 148rpx;
				border: 2rpx solid #dee2ee;
				border-radius: 10rpx;
				position: relative;
				margin-right: 18rpx;

				.photo {
					width: 100%;
					height: 100%;

				}

				.close {
					position: absolute;
					width: 32rpx;
					height: 32rpx;
					right: -16rpx;
					top: -16rpx;
				}
			}

			.imgbox:nth-child(4n) {

				margin-right: 0rpx;
			}
		}
	}

	.btns {
		.btn {

			padding: 10rpx 30rpx;
			border: 2rpx solid #409eff;
			border-radius: 34rpx;
		}
	}

	.sbtn {
		width: 176rpx;
		height: 88rpx;
		border: 2rpx solid #dee2ee;
		border-radius: 46rpx;
	}

	.lbtn {
		width: 484rpx;
		margin-right: 0;
	}

	.table {
		width: 100%;

		.col1 {
			width: 150rpx;

		}

		.col2 {
			width: 240rpx;
		}

		.col3 {
			width: 240rpx;
		}

		.theader {
			background: #f5f7fa;
			padding: 10rpx 20rpx;
		}

		.tline {
			width: 100%;
			height: 100rpx;
			padding: 0 20rpx;
			border-bottom: 2px solid #f5f7fa;
		}
	}
</style>

<template>
	<view class="content">



		<view class="box" style="padding-bottom: 0;">
			<view class="textColor f32 bold p-bottom30">基础信息</view>
			<view class="line between-flex f28">
				<view class="gray"><span class="red">*</span>调研负责人</view>
				<view class="blue align-flex">

					<span v-if="!people">请选择</span>
					<span v-else class=" align-flex">
						{{people.value | user}}
					</span>
				</view>
			</view>
			<view class="line between-flex f28">
				<view class="gray p-left10">调研成员</view>
				<view class="blue align-flex" @click="!person?$navTo(PagesCourseRouterConfig.ChoosePerson):$navTo(PagesCourseRouterConfig.ChoosePerson+'?users='+person.value)">
					<span v-if="!person">请选择</span>
					<span v-else class=" align-flex">
						<view style="max-width:400rpx;" class="one">{{person.value ?  person.value    :'' | users}}</view>
						等{{person.value.split(',').length}}人
					</span>
					<u-icon name='arrow-right'></u-icon>
				</view>
			</view>
			<view class="line between-flex f28">
				<view class="gray"><span class="red">*</span>调研时间</view>
				<view class="blue" @click="showStarttime=true">{{startTime?startTime:'请选择'}}
					<u-icon name='arrow-right'></u-icon>
				</view>
			</view>
			<view class="line2 between-flex f28 p-top20">
				<view class="gray"><span class="red">*</span>调研地点</view>
				<textarea class="des textColor" style="height:120rpx;" v-model="place" placeholder="请填写调研地点" placeholder-class="gray" />

			</view>
			<view class="line between-flex f28">
				<view class="gray p-left10">期望完成时间</view>
				<view class="blue" @click="showEndtime=true">{{endTime?endTime:'请选择'}}
					<u-icon name='arrow-right'></u-icon>
				</view>
			</view>
			<view class="line between-flex f28">
				<view class="gray"><span class="red">*</span>涉及系统</view>
				<view class="blue" @click="$navTo(PagesCourseRouterConfig.ChooseSys)">{{aboutSystem?aboutSystem.name:'请选择'}}
					<u-icon name='arrow-right'></u-icon>
				</view>
			</view>
			<view class="line2 between-flex f28 p-top20">
				<view class="gray"><span class="red">*</span>需求目的</view>
				<textarea class="des textColor" style="height:120rpx;" v-model="purpose" maxlength="100" placeholder="请填写需求目的" placeholder-class="gray" />

			</view>
			<!-- <view class="line between-flex f28 ">
				<view class="gray" style="width:300rpx;">调研工时（单位：天）</view>
				<input class="ipt" style="width:300rpx;" type="digit" :disabled="!checked" v-model="dayTime"
					@input="iptDaytime" :placeholder="!checked?'0':'请输入'" placeholder-class="gray" />
			</view> -->
		</view>
		<!-- <view class="box " style="padding: 0;">
			<view class="between-flex" style="padding: 20rpx;">
				<view class="f32 bold textColor">工时分配</view>
				<view class="align-flex f28">
					<view :class="!checked?'gray':'textColor'">平均分配</view>
					<view class="m-right20 m-left20">
						<u-switch v-model="checked" @change="change" active-color="#409EFF" inactive-color="#07C160">
						</u-switch>
					</view>
					<view :class="checked?'gray':'textColor'">手动分配</view>
				</view>
			</view>
			<view class="table">
				<view class="theader between-flex gray">
					<view class="col1 center-flex">姓名</view>
					<view class="col2 center-flex"><span class='red'>*</span>工时（单位：天）</view>
					<view class="col3 center-flex">备注</view>
				</view>
				<view class="tline textColor between-flex" v-for="item,index in persons" :key="index">
					<view class="col1 center-flex">{{item.name}}</view>
					<view class="col2"><input class="" type="digit" @input='computedAlltime' :disabled="checked"
							v-model="persons[index].time" :placeholder="checked?'请输入调研工时':'请输入'"
							placeholder-class="gray" /></view>
					<view class="col3">
						<input class="" type="text" style="width:300rpx;" v-model="persons[index].desc"
							placeholder="请输入备注" placeholder-class="gray" />
					</view>
				</view>
			</view>

		</view> -->

		<view class="box " style="padding-bottom: 0;">
			<view class="f32 bold textColor p-bottom30">调研内容</view>

			<view class="line between-flex f28">
				<view class="gray">业务描述</view>
			</view>
			<textarea class="des textColor p-left10" style="height:220rpx;width:100%;" v-model="outline" placeholder-class="gray" maxlength="255" placeholder="业务场景、当前痛点" />

			<view class="line between-flex f28">
				<view class="gray">解决方案设计</view>
			</view>
			<textarea class="des textColor  p-left10" style="height:220rpx;width:100%;" v-model="functions" maxlength="255" placeholder-class="gray" />

			<view class="line between-flex f28">
				<view class="gray">后续行动计划</view>
			</view>
			<textarea class="des textColor  p-left10" style="height:220rpx;width:100%;" v-model="followUpActionPlan" maxlength="255" placeholder-class="gray" />

			<view class="line between-flex f28">
				<view class="gray">其他要求</view>
			</view>
			<textarea class="des textColor  p-left10" style="height:220rpx;width:100%;" v-model="other" maxlength="255" placeholder-class="gray" />

		</view>
		<view class="box " style="padding-bottom: 0;">
			<view class="between-flex p-bottom30">
				<view class="f32 bold textColor">附件</view>
				<view class="btns align-flex">
					<view class="btn center-flex blue m-right20" @click="chooseImg">拍照</view>
					<view class="btn center-flex blue" @click="uploadfile">上传附件</view>
				</view>
			</view>

			<view class="line between-flex f28" v-for="item,index in enclosure" :key="index">
				<view class="align-flex blue">
					<u-icon name="file-text" color="#409EFF" size="38"></u-icon>
					{{item.fileName.substring(item.fileName.length-10)}}
				</view>
				<view class="gray">
					<u-icon name='close' @click="delfile(index)"></u-icon>
				</view>
			</view>



		</view>
		<view class="space"></view>
		<view class="footer between-flex paddingBottom">
			<view class="sbtn center-flex textColor bold" @click="$back">取消</view>
			<view class="lbtn" @click="submit">提交</view>
		</view>
		<u-picker v-model="showStarttime" mode="time" :params="params" @confirm="confirm($event,1)"></u-picker>
		<u-picker v-model="showEndtime" mode="time" :params="params" @confirm="confirm($event,2)"></u-picker>
	</view>
</template>

<script>
	import PagesCourseRouterConfig from '@/pagesCourse/routerConfig.js'
	export default {
		data() {
			return {
				PagesCourseRouterConfig,
				navheight: 0,
				head: this.$head,
				checked: true,
				itemCode: 0,
				info: {},
				investigate: {},
				showStarttime: false,
				showEndtime: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: false
				},
				people: null, //调研负责人
				person: null, //调研成员
				startTime: '', //调研时间
				place: '', //调研地点
				endTime: '', //期望完成时间
				aboutSystem: null, //涉及系统
				purpose: '', //调研目的
				dayTime: '', //调研工时
				persons: [], //分配工时的人员
				outline: '', //测试适用业务场景概述
				functions: '', //测试系统功能/相关系统
				other: '', //其他要求
				enclosure: [], //附件
				followUpActionPlan: '', //后续行动计划

			}
		},
		onLoad(e) {
			this.itemCode = e.itemCode
			this.getInfo()


			uni.$on('choosePerson', () => {
				if (this.person && this.people) {
					var list = this.person.value.split(',')

					if (list.indexOf(this.people.value) == -1) {
						list.unshift(this.people.value)
						this.person.value = list.join(',')
					}
					//  else {
					// 	this.person.value = this.person.value.split(',')

					// 	var index = list.indexOf(this.people.value)
					// 	this.person.value.splice(index, 1)
					// 	this.person.value = this.person.value.join(',')

					// }

				}
				this.getPersons()

			})
		},

		beforeDestroy() {
			uni.$off('choosePerson')
		},
		methods: {
			getdate() {
				var date = new Date();
				var seperator1 = "-";
				var seperator2 = ":";
				var month = date.getMonth() + 1;
				var strDate = date.getDate();
				var hour = date.getHours()
				var min = date.getMinutes()
				month < 10 ? month = '0' + month : ''
				strDate < 10 ? strDate = '0' + strDate : ''
				hour < 10 ? hour = '0' + hour : ''
				min < 10 ? min = '0' + min : ''
				var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate + " " + hour +
					seperator2 + min

				this.startTime = currentdate;
			},
			submit() {
				if (!this.people) {
					this.$msg('请选择调研负责人！')
					return
				}
				if (!this.person) {
					this.$msg('请选择调研人员！')
					return
				}
				if (!this.startTime) {
					this.$msg('请选择调研时间！')
					return
				}
				if (!this.place) {
					this.$msg('请输入调研地址！')
					return
				}
				if (!this.aboutSystem) {
					this.$msg('请选择涉及系统！')
					return
				}
				if (!this.purpose) {
					this.$msg('请输入需求目的！')
					return
				}
				// if (!this.dayTime) {
				// 	this.$msg('请输入调研工时！')
				// 	return
				// }
				// if (!this.outline) {
				// 	this.$msg('请输入适用业务场景概述！')
				// 	return
				// }
				// if (!this.functions) {
				// 	this.$msg('请输入系统功能/相关系统！')
				// 	return
				// }
				// var flag = true
				// this.persons.forEach(item => {
				// 	if (!item.time) {
				// 		flag = false
				// 		this.$msg(item.name + '未分配工时 ')
				// 	}
				// })
				// if (!flag) {
				// 	return
				// }
				var obj = {
					itemCode: this.itemCode,
					principal: this.people.value,
					users: this.person.value,
					startTime: this.startTime,
					place: this.place,
					aboutSystem: this.aboutSystem.value,
					purpose: this.purpose,
					dayTime: this.dayTime,
					dayMode: this.checked ? 0 : 1,
					dayDetail: JSON.stringify(this.persons),
					outline: this.outline,
					functions: this.functions,
					other: this.other,
					followUpActionPlan: this.followUpActionPlan

				}
				if (this.enclosure.length > 0) {
					var enclosure = []
					this.enclosure.forEach(item => {
						enclosure.push({
							name: item.oldName,
							url: item.url
						})
					})
					obj['enclosure'] = JSON.stringify(enclosure)
				}
				if (this.endTime) {
					obj.endTime = this.endTime
				}
				// console.log(obj)
				this.$showloading()
				this.$pop.ajaxPost('/busItemInvestigate/confirm', obj).then(res => {
					uni.hideLoading()
					if (res.code == 0) {
						this.$msg(res.msg)
						setTimeout(() => {
							uni.navigateBack({
								delta: 2
							})
						}, 1500)

					} else {
						this.$msg(res.msg)
					}
				})
			},
			uploadInfo() { //更新继续调研信息


				if (this.investigate.outline) {
					this.outline = this.investigate.outline
				}
				if (this.investigate.functions) {
					this.functions = this.investigate.functions
				}
				if (this.investigate.other) {
					this.other = this.investigate.other
				}
				if (this.investigate.enclosure) {
					this.enclosure = JSON.parse(this.investigate.enclosure)
					this.enclosure.forEach(item => {
						item.fileName = item.name
					})
				}
				this.persons = JSON.parse(this.investigate.dayDetail)
				if (this.investigate.dayMode) {
					this.checked = false
				} else {
					this.checked = true
				}
				if (this.investigate.dayTime) {
					this.dayTime = this.investigate.dayTime
				}
				if (this.investigate.purpose) {
					this.purpose = this.investigate.purpose
				}

				if (this.investigate.endTime) {
					this.endTime = this.investigate.endTime
				}
				if (this.investigate.startTime) {
					this.startTime = this.investigate.startTime
				}
				if (this.investigate.place) {
					this.place = this.investigate.place
				}
				this.people = {
					value: this.investigate.principal
				}
				this.person = {
					value: this.investigate.users
				}
				this.aboutSystem = this.$getSys(this.investigate.aboutSystem)

			},
			delfile(index) {
				this.enclosure.splice(index, 1)
			},
			//选择图片
			async chooseImg() {

				var file = await this.$chooseImg()

				this.enclosure.push(file)

			},
			async uploadfile() {

				var file = await this.$uploadfile()
				this.enclosure.push(file)

			},
			iptDaytime(e) {
				console.log(e)

				if (this.checked && this.dayTime) {
					this.computedTime()
				} else {
					this.persons.forEach(item => {
						item.time = ''
					})
				}
			},
			computedAlltime() {
				var time = 0
				this.persons.forEach(item => {
					time += Number(item.time)
				})

				this.dayTime = time
			},
			computedTime() {
				var time = (this.dayTime / this.persons.length).toFixed(2)
				this.persons.forEach(item => {
					item.time = time
				})

			},
			getPersons() {
				var arr = this.person.value.split(',')
				this.persons = []
				arr.forEach(item => {
					this.persons.push({
						name: this.getUser(item),
						id: item,
						time: '',
						desc: ''
					})
				})

				if (this.checked && this.dayTime) {
					this.computedTime()
				}
			},
			getUser(value) {
				var list = uni.getStorageSync('user')


				return list[value] || '无'
			},
			confirm(e, index) {
				console.log(e)
				if (index == 1) {
					this.startTime = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute
				} else {
					var time = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute
					console.log(this.startTime, time)
					if (this.$compareTime(this.startTime, time)) {
						this.$msg('选择的时间不能小于调研时间')
					} else {
						this.endTime = time
					}

				}
			},

			getInfo() {

				this.$pop.ajaxPost('/busItemInfo/getWorkDetail', {
					itemCode: this.itemCode
				}).then(res => {
					if (res.code == 0) {
						this.info = res.body.demand || {}
						this.investigate = res.body.investigate || {}
						//处理预渲染
						if (this.info.showState == 'demand_inv_review_next') { //继续调研
							this.uploadInfo()
						} else { //第一次调研
							this.people = {
								value: this.investigate.principal
							}
							this.person = {
								value: this.investigate.users
							}
							this.getPersons()
							this.aboutSystem = this.$getSys(this.info.aboutSystem)
							if (this.info.endTime) {
								this.endTime = this.info.endTime.substring(0, this.info.endTime.length - 3)
							}
							this.getdate()
						}


					}
				})
			},
			change(e) {

				if (!e) {

					this.persons.forEach(item => {
						item.time = ''
					})
					this.dayTime = ''
					this.$forceUpdate()
				} else {
					if (this.dayTime) {
						this.computedTime()
					}
				}
			}
		}
	}
</script>
